<script setup lang="ts">
	import {
		reactive,
		inject,
		computed
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import user from '@/api/user.js'
	let navBg = {
		backgroundColor: 'rgb(250,250,250)'
	}
	const msgAlert : Function = inject('$msgAlert')
	const apiTry : Function = inject('$try')
	let iconArr = [{
		i: 0,
		name: 'scan',
		size: '36rpx',
		title: '我的相册'
	},
	{
		i: 1,
		name: 'scan',
		size: '36rpx',
		title: '点赞记录'
	},
	{
		i: 2,
		name: 'scan',
		size: '36rpx',
		title: '浏览记录'
	},
	{
		i: 3,
		name: 'scan',
		size: '36rpx',
		title: '直播记录'
	},
	{
		i: 4,
		name: 'scan',
		size: '36rpx',
		title: '我的钱包'
	},
	{
		i: 5,
		name: 'scan',
		size: '36rpx',
		title: '商城'
	},
	{
		i: 6,
		name: 'scan',
		size: '36rpx',
		title: '我的订单'
	},
	{
		i: 7,
		name: 'scan',
		size: '36rpx',
		title: '创作中心'
	},
	{
		i: 8,
		name: 'scan',
		size: '36rpx',
		title: '客服'
	},
	{
		i: 9,
		name: 'scan',
		size: '36rpx',
		title: '会员中心'
	},
	{
		i: 10,
		name: 'scan',
		size: '36rpx',
		title: '装扮中心'
	},
	{
		i: 11,
		name: 'scan',
		size: '36rpx',
		title: '打卡签到'
	}
	]
	//跳转方法
	const skip = (str : string, type : Boolean = false) => {
		if (type) {
			uni.redirectTo({
				url: str,
			})
		} else {
			uni.navigateTo({
				url: str
			})
		}

	}
	interface userFace {
		[propName : string] : any
	}
	const info = reactive<userFace>({
		form: {},
		nums: {}
	})
	onShow(() => {
		let token = uni.getStorageSync('token')
		if (!token) return skip('/pages_logins/logins', true)
		getUserInfo()
		getUserDetial()
	})
	//获取用户信息
	const getUserInfo = async () => {
		const [err, res] = await apiTry(user.getUserInfo())
		if (err) return msgAlert(err)
		if (res.status === 200) {
			info.form = res.data
		} else {
			msgAlert(res.msg)
		}
	}
	const getUserDetial = async () => {
		const [err, res] = await apiTry(user.getUserDetial())
		if (err) return
		info.nums = res.data
	}
	const iconPage = (i) => {
		switch (i) {
			case 0:

				break
			case 1:
				skip('', false)
				break
			default: uni.showToast({
				title: '功能更新中',
				icon: 'none'
			})
		}
	}
	const million = computed(() => {
		return function (value: any) {
			let num: any
			if (value > 9999) { //大于9999显示x.xx万
				num = ((value / 1000) / 10).toFixed(2) + '万'
			} else if (value <= 9999 && value >= -9999) {
				num = value + '元'
			} else if (value < -9999) { //小于-9999显示-x.xx万
				num = -((Math.abs(value) / 1000) / 10).toFixed(2) + '万'
			}
			return num
		}
	})
	
</script>

<template>
	<view class="main">
		<u-navbar :is-back="false" :background="navBg">
			<view class="flex flex-ai-c flex-jc-fe icon">
				<view @click="skip('/pages_me/increase/index',false)">
					<u-icon size="36rpx" name="man-add" color="rgb(175,177,181)"></u-icon>
				</view>
				<view>
					<u-icon size="36rpx" name="scan" color="rgb(175,177,181)"></u-icon>
				</view>
				<view @click="skip('/pages_me/setting/index',false)">
					<u-icon size="36rpx" name="setting" color="rgb(175,177,181)"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="head flex" @click="skip('/pages_me/edit_user_info/index',false)">
			<view class="head-img">
				<image :src="info.form.handimg || '../../static/img/headimg.jpg'"></image>
			</view>
			<view class="userinfo">
				<view class="name">{{info.form.username}}</view>
				<view class="introduce description">简介：{{info.form.sign || '这个用户很懒'}}</view>
			</view>
		</view>
		<!-- 功能 -->
		<view class="fun flex flex-jc-sa flex-ai-c">
			<view @click="skip('/pages_me/my_web/index',false)">
				<view class="fun-num">{{info.nums.articleNum}}</view>
				<view class="fun-text">文章</view>
			</view>
			<view @click="skip('/pages_me/follow/index',false)">
				<view class="fun-num">{{info.nums.followNum}}</view>
				<view class="fun-text">关注</view>
			</view>
			<view @click="skip('/pages_me/follow/follower',false)">
				<view class="fun-num">{{info.nums.fanNum}}</view>
				<view class="fun-text">粉丝</view>
			</view>
		</view>

		<!-- 工具 -->
		<view class="flex flex-ai-c flex-wrap-w tool card-bgc">
			<view v-for="item in iconArr" :key="item.i" class="tool-list" @click="iconPage(item.i)">
				<view>
					<u-icon :size="item.size" :name="item.name" color="rgb(175,177,181)"></u-icon>
				</view>
				<view>{{item.title}}</view>
			</view>
		</view>

		<!-- 钱包 -->
		<view class="wallet card-bgc">
			<view class="flex flex-jc-sb wallet-head">
				<view>我的钱包</view>
				<view @click="skip('/pages_me/wallet/index')">查看详情</view>
			</view>
			<view style="text-align: center;color: rgb(100,100,100);" class="wallet-money">
				<view style="font-size: 40rpx;font-weight: 500;">余额</view>
				<view style="font-size: 60rpx;"><text style="font-weight: bold;">{{million(info.form.balance)}}</text></view>
			</view>
		</view>

		<view class="wallet card-bgc" style="padding-bottom: 20rpx;">
			<view class="flex flex-jc-sb wallet-head">
				<view>历史访问</view>
				<view>查看详情</view>
			</view>
			<view class="flex flex-jc-sa">
				<view v-for="item in 5">
					<view class="head-img" style="width: 110rpx;height: 110rpx;">
						<image style="border-radius: 50%;" src="../../static/img/headimg.jpg"></image>
					</view>
					<view style="text-align: center;">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import "index.scss";
</style>